<!--首页-->
<template>
  <div class="home-page">
    <!-- keep-alive:页面只加载一次，第二次就不再加载了，减少服务器的压力 -->
    <!-- router-view是Home页面下子路由的页面 -->
    <!-- <keep-alive> -->
      <router-view />
    <!-- </keep-alive> -->
    <van-tabbar v-model="active" @change="changeTabbar(active)">
      <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
      <van-tabbar-item icon="records">分类</van-tabbar-item>
      <van-tabbar-item icon="cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Bus from "../../bus";
export default {
  data() {
    return {
      active: 0
    };
  },
  watch: {
    // 在watch里面，监听路由变化,动态改变tabbar的active
    $route() {
      // 解决从商品详情页转到购物车的tabbar的active不变的问题
      const { path } = this.$route;
      switch (path) {
        case "/":
          this.active = 0;
          break;
        case "/categoryList":
          this.active = 1;
          break;
        case "/shopCar":
          this.active = 2;
          break;
        case "/memberCenter":
          this.active = 3;
          break;
        default:
          break;
      }
    }
  },
  methods: {
    changeTabbar(active) {
      switch (active) {
        case 0:
          this.$router.push({ name: "ShoppingMall" });
          break;
        case 1:
          this.$router.push({
            name: "CategoryList",
            query: { categoryId: "-1" }
          });
          break;
        case 2:
          this.$router.push({ name: "ShopCar" });
          break;
        case 3:
          this.$router.push({ name: "MemberCenter" });
        default:
          break;
      }
    }
  }
};
</script>

<style scoped>
</style>